<template>
    <div class="detail-all">
        <custNavbar title="文章详情" uname="link-o" paths="" />
        <div class="det-body">
            <h3 class="det-h3-title">{{ detailsdata.title }}</h3>
            <div class="det-avart">
                <div class="det-left">
                    <div class="det-left01">
                        <img src="@/assets/oval.png" alt="" style="height: 48px;">
                    </div>
                    <div class="det-right01">
                        <p style="font-size: 14px;">{{ detailsdata.name }}</p>
                        <p style="font-size: 12px;color: #999999;">{{ dayjs(detailsdata.timer)
                .format('YYYY-MM-DD HH: mm: ss') }}</p>
                    </div>
                </div>
                <div class="det-right">
                    <van-button round type="success" size="mini" class="det-right-btn" @click="follow(detailsdata)"
                        v-if="detailsdata.status == false">+ 关注</van-button>
                    <van-button round type="success" size="mini" class="det-right-btn" @click="follow(detailsdata)"
                        v-else>已关注</van-button>
                </div>
            </div>
            <div class="det-image">
                <img src="@/assets/u4009.png" alt="" class="det-image-img">
            </div>
            <p class="det-context">{{ detailsdata.context?.slice(0, 130) }}</p>
            <div class="det-image">
                <img src="@/assets/u4009.png" alt="" class="det-image-img">
            </div>
            <p class="det-context">{{ detailsdata.context?.slice(131, 261) }}</p>
            <p style="width: 100%;height:0.1px;background-color:#e3e3e3;margin: 20px 0;"></p>
            <p style="font-size: 14px;color: #999999;margin:10px 0;">相关课程</p>
            <div class="det-classcourse" v-for="item in coursedata.slice(0, 3)" :key="item._id" @click="detailke(item)">
                <div class="det-class-boxleft">
                    <img src="@/assets/u1975.png" alt="jl" class="img">
                </div>
                <div class="det-class-boxright">
                    <p>{{ item.title.slice(0, 20) + '.....' }}</p>
                    <ul>
                        <li>{{ item.num }}人正在学</li>
                        <li class="det-class-price">限时{{ item.price }}元</li>
                    </ul>
                </div>
            </div>
            <p style="font-size: 14px;color: #999999;margin:10px 0;">相关阅读</p>
            <div class="det-class" v-for="item in tabledata.slice(0, 3)" :key="item._id" @click="detail(item)">
                <div class="det-class-boxleft">
                    <img src="@/assets/jl.png" alt="jl" class="img">
                </div>
                <div class="det-class-boxright">
                    <p>{{ item.title.slice(0, 20) + '.....' }}</p>
                    <ul>
                        <li>{{ item.name }}</li>
                        <li><van-icon name="eye-o" />&nbsp;{{ item.cnum }}</li>
                    </ul>
                </div>
            </div>
            <commentbly :commdata="commdata" @additem="addcomitem" @onfudel="onfudelcom" @onzidel="onzidelcom"/>
        </div>
        <div class="det-bar">
            <van-action-bar>
                <van-search shape="round" @click="showPopup" left-icon="edit" placeholder="添加评论....."
                    style="width: 170px;height: 32px;" />
                <ul class="det-bar-right">
                    <li>
                        <span v-if="detailsdata.coll" @click="oncoll(detailsdata)"><van-icon name="star" size="16"
                                color="Gold" /><span>31</span></span>
                        <span v-else @click="oncoll(detailsdata)"><van-icon name="star-o"
                                size="16" /><span>31</span></span>
                    </li>
                    <li>
                        <span v-if="detailsdata.like" @click="onlike(detailsdata)"><van-icon name="good-job" size="16"
                                color="BlueViolet" /><span>31</span></span>
                        <span v-else @click="onlike(detailsdata)"><van-icon name="good-job-o"
                                size="16" /><span>31</span></span>
                    </li>
                    <li><van-icon name="chat-o" size="16" /><span>11</span></li>
                </ul>
            </van-action-bar>
        </div>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '80%' }">
            <ul class="det-pop-uls">
                <li style="font-size: 18px;">评论</li>
                <li @click="addcom"><van-icon name="guide-o" size="26" /></li>
            </ul>
            <van-field v-model="textval" placeholder="请发布友善言论哦~" rows="6" autosize type="textarea" />
        </van-popup>
    </div>
</template>

<script setup>
import custNavbar from '@/components/custNavbar/index.vue'
import commentbly from '@/views/tabbar/Article/comment/index.vue'
import { ref, onMounted, reactive } from 'vue'
import dayjs from 'dayjs'
import {getCourse,getShowArtive,getDetidsId,getCommShow,getAddcom,getDelcom,getDetstatus} from '@/api'
import { useRouter, useRoute } from 'vue-router';
import { showToast } from 'vant';

const detailsdata = ref([])
const tabledata = ref([])
const router = useRouter()
const route = useRoute()
const detailke = (item) => {
    localStorage.setItem('listObj', JSON.stringify(item))
    router.push({ path: '/xiang' })
}

const detail = async (item) => {
    router.push({ path: `/details/${item._id}` })
    const {list} = await getDetidsId(item._id)
    detailsdata.value = list
    window.scrollTo({
        top: 0,
        behavior: 'smooth' // 使用平滑滚动效果
    });
}

const follow = async (dx) => {
    detailsdata.value.status = !dx.status
    await getDetstatus(detailsdata.value)
    if (detailsdata.value.status) {
        showToast('关注成功');
    } else {
        showToast('取消关注成功');
    }
    getlist()
}

const ids = route.params.id
const coursedata = ref([])

const oncoll = async (dx) => {
    detailsdata.value.coll = !dx.coll
    await getDetstatus(detailsdata.value)
    if (detailsdata.value.coll) {
        showToast('收藏成功');
    } else {
        showToast('取消收藏成功');
    }
    getlist()
}
const onlike = async (dx) => {
    detailsdata.value.like = !dx.like
    await getDetstatus(detailsdata.value)
    if (detailsdata.value.like) {
        showToast('已点赞');
    } else {
        showToast('已取消点赞');
    }
    getlist()
}

const commdata = ref([])
const show = ref(false);
const showPopup = () => {
    show.value = true;
}
const comform = reactive({})
const textval = ref(null)
// coms
const coms = ref('')
const addcom =async () => {
    const obj = {
        name: 'mtg123',
        text: textval.value,
        com:coms.value || null
    }
    comform.obj=obj
    const data = await getAddcom(comform.obj)
    if(data.code==200){
        showToast({
            message: '发布成功',
            icon: 'success',
        });
        show.value = false
        comlist()
        textval.value=''
        coms.value=''
    }else{
        showToast({
            message: '发布失败',
            icon: 'cross',
        });
    }
}

const addcomitem=(dx)=>{
    show.value=true
    coms.value=dx._id
}

const onfudelcom=async (dx)=>{
    // console.log(dx);
    if(dx.children){
        alert('no del')
    }else{
        const data=await getDelcom({params:{id:dx._id}})
    }
}

const onzidelcom=async (dx)=>{
    // console.log(dx);
    if(dx.children){
        alert('no del')
    }else{
        const data=await getDelcom({params:{id:dx._id}})
    }
}

const getlist = onMounted(async () => {
    const {data} = await getCourse()
    coursedata.value = data
    const {artdata} = await getShowArtive()
    tabledata.value = artdata
    const {list} = await getDetidsId(ids)
    detailsdata.value = list
})

const comlist = onMounted(async () => {
    const {comdata} = await getCommShow()
    commdata.value = comdata
})

</script>

<style lang="scss" scoped>
.detail-all {

    .det-body {
        padding: 0 13px;

        .det-h3-title {
            font-size: 20px;
            margin: 10px 0;
        }

        .det-avart {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;

            .det-left {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .det-left01 {
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    margin-right: 8px;
                }
            }

            .det-right {
                .det-right-btn {
                    width: 66px;
                    height: 26px;
                    background-color: #666EE8;
                    color: #fff;
                }
            }
        }

        .det-image {
            width: 345px;
            height: 170px;
            background-color: #666EE8;
            margin: 5px auto;
            text-align: center;

            .det-image-img {
                width: 160px;
                height: 130px;
                margin-top: 20px;
            }
        }

        .det-context {
            font-size: 14px;
        }

        .det-class {
            padding: 5px 0;
            display: flex;
            justify-content: space-between;

            .det-class-boxleft {
                width: 120px;
                height: 75px;
                background-color: #666EE8;
                text-align: center;
                line-height: 75px;
                border-radius: 10px;

                .img {
                    width: 76px;
                    height: 65px;
                    align-items: center;
                    vertical-align: middle;
                }
            }

            .det-class-boxright {
                width: 215px;
                height: 75px;
                border-radius: 10px;

                p {
                    font-size: 14px;
                }

                ul {
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                    position: relative;
                    top: 25px;
                    color: #999999;
                }
            }
        }

        .det-classcourse {
            padding: 5px 0;
            display: flex;
            justify-content: space-between;

            .det-class-boxleft {
                width: 120px;
                height: 75px;
                background-color: #666EE8;
                text-align: center;
                line-height: 75px;
                border-radius: 10px;

                .img {
                    width: 80px;
                    height: 65px;
                }
            }

            .det-class-boxright {
                width: 215px;
                height: 75px;
                border-radius: 10px;

                p {
                    font-size: 14px;
                    font-weight: bold;
                }

                ul {
                    font-size: 12px;
                    color: #999999;

                    li {
                        margin: 10px 0;
                    }

                    .det-class-price {
                        font-size: 14px;
                    }
                }
            }
        }
    }

    .det-bar {
        padding-bottom: 50px;

        .det-bar-right {
            display: flex;
            margin-left: 35px;
            align-items: center;

            li {
                margin: 0 5px;
                align-items: center;

                span {
                    font-size: 14px;
                    padding: 0 3px;
                    vertical-align: middle;
                }

            }
        }
    }

    .det-pop-uls {
        display: flex;
        justify-content: space-between;
        margin: 10px;
    }
}
</style>